I have an array of objects which I use to list values in page with map. But from time to time I receive this error.
Warning: Each child in a list should have a unique "key" prop.
Although keys are unique.
Maybe anyone knows what could be wrong here?
const items = [
{key: 1, name: 'Item one', value: 34 },
{key: 2, name: 'Item two', value: 45 },
{key: 3, name: 'Item three', value: 12 },
]
const item = ({ name, value, key }) => (
<div>
<p>{name}</p>
<p>{value}</p>
</div>
)
return(
<div>
{items.map(i => item(i))}
</div>
)
item needs to be a component, and React component names need to be capitalised. Your Item component is expecting an object. Your "key" needs to be placed on the mapped component.
// Accepts items
// From each object in the array it gets the
// key, name, and value, and returns a new
// component
function Example({ items }) {
return (
<div>
{items.map(item => {
const { key, value, name } = item;
return <Item key={key} value={value} name={name} />
})}
</div>
);
}
// Accepts an object - returns some JSX to be rendered
function Item({ name, value }) {
return (
<div>
<p>{name}</p>
<p>{value}</p>
</div>
);
}
const items = [
{key: 1, name: 'Item one', value: 34 },
{key: 2, name: 'Item two', value: 45 },
{key: 3, name: 'Item three', value: 12 },
];
ReactDOM.render(
<Example items={items} />,
document.getElementById('react')
);<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.production.min.js"></script>
<div id="react"></div>you just need to pass the key in child div as I have done in your code below. I think it will remove your error below
import React from 'react';
import './style.css';
export default function App() {
const items = [
{ key: 1, name: 'Item one', value: 34 },
{ key: 2, name: 'Item two', value: 45 },
{ key: 3, name: 'Item three', value: 12 },
];
const item = ({ name, value, key }) => (
<div key={key}>
<p>{name}</p>
<p>{value}</p>
</div>
);
return <div>{items.map((i) => item(i))}</div>;
}